<th
  *ngIf="headerCheckable"
  [attr.rowspan]="headerRowspan"
  class="devui-checkable-cell"
  [ngClass]="{ 'devui-sticky-left-cell': firstTh?.fixedLeft }"
  [style.left]="'0px'"
>
  <d-checkbox
    *ngIf="!headerCheckOptions || !headerCheckOptions.length || !selectOptionOnCheckbox"
    class="check-box-all"
    [name]="'checkbox'"
    (change)="onHeaderCheckChange($event)"
    [(ngModel)]="headerChecked"
    [halfchecked]="headerHalfChecked"
    [disabled]="headerCheckDisabled"
  ></d-checkbox>

  <div *ngIf="headerCheckOptions && headerCheckOptions.length > 0" dDropDown appendToBody [trigger]="'hover'" class="select-options">
    <div dDropDownToggle *ngIf="selectOptionOnCheckbox">
      <d-checkbox
        class="check-box-all"
        [name]="'checkbox'"
        (change)="onHeaderCheckChange($event)"
        [(ngModel)]="headerChecked"
        [halfchecked]="headerHalfChecked"
        [disabled]="headerCheckDisabled"
        dPopover
        [zIndex]="checkOptionsIndex"
        [position]="'right'"
        [visible]="headerCheckOptions?.length && showTip"
        [content]="checkboxTemplate"
      ></d-checkbox>
      <ng-template #checkboxTemplate>
        <div>
          <span>{{ curLabel }}</span>
          <svg
            width="16px"
            height="16px"
            class="close-icon"
            (click)="showTip = false"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g _ngcontent-sjo-c218="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                _ngcontent-sjo-c218=""
                d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z"
                id="形状"
                fill="#D5D5DB"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
      </ng-template>
    </div>
    <div *ngIf="!selectOptionOnCheckbox" dDropDownToggle>
      <svg
        xmlns:xlink="http://www.w3.org/1999/xlink"
        height="16px"
        version="1.1"
        viewBox="0 0 16 16"
        width="16px"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g fill="none" fill-rule="evenodd" id="chevron_down" stroke="none" stroke-width="1">
          <polygon points="4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"></polygon>
        </g>
      </svg>
    </div>
    <ul dDropDownMenu class="devui-dropdown-menu" role="menu">
      <li
        *ngFor="let option of headerCheckOptions"
        [ngClass]="{ active: curLabel === option.label }"
        role="menuitem"
        (click)="onOptionSelect(option); curLabel = option.label; showTip = true"
      >
        <a class="devui-dropdown-item">{{ option.label }}</a>
      </li>
    </ul>
  </div>
</th>
<ng-content></ng-content>
